<template>
  <div class="broadcast-main">
    <div class="broadcast-card left-card">
      <div class="card-header">
        <span class="card-step">1</span>
        <span class="card-title">广播类型</span>
      </div>
      <div class="card-content">
        <div class="label-row">广播类型 <el-button size="small" class="setting-btn">设置</el-button></div>
        <el-radio-group v-model="form.type" class="type-group">
          <el-radio v-for="item in typeOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
        <div class="bed-title">选择床位（必选）</div>
        <div class="bed-actions">
          <el-button size="small" @click="selectAllBeds">全选</el-button>
          <el-button size="small" @click="reverseBeds">反选</el-button>
        </div>
        <div class="bed-list">
          <el-checkbox-group v-model="form.beds">
            <el-checkbox
              v-for="bed in bedOptions"
              :key="bed.value"
              :label="bed.value"
            >{{ bed.label }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="broadcast-card mid-card">
      <div class="card-header">
        <span class="card-step">2</span>
        <span class="card-title">广播内容</span>
      </div>
      <div class="card-content">
        <div class="label-row">广播模板 <el-button size="small" class="setting-btn">设置</el-button></div>
        <el-checkbox-group v-model="form.templates" class="template-group">
          <el-checkbox
            v-for="tpl in templateOptions"
            :key="tpl.value"
            :label="tpl.value"
            class="template-checkbox"
          >
            <span class="template-label">{{ tpl.label }}</span>
          </el-checkbox>
        </el-checkbox-group>
        <div class="tree-title">宣教与指南</div>
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          :default-checked-keys="form.treeChecked"
          :props="treeProps"
          @check="handleTreeCheck"
          class="tree"
        />
      </div>
    </div>
    <div class="right-panel">
      <div class="card-header">
        <span class="card-step">3</span>
        <span class="card-title">任务名称</span>
      </div>
      <div class="task-row">
        <span class="task-label">任务名称:</span>
        <el-input v-model="form.taskName" placeholder="任务名称" class="task-input" />
      </div>
      <el-button type="primary" @click="handleSave" class="save-btn">保存</el-button>
      <div class="record-row">
        <span>广播记录</span>
        <el-button size="small" class="view-btn">查看</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// 广播类型选项
const typeOptions = [
  { label: '健康宣教', value: 'health' },
  { label: '通知公告', value: 'notice' },
  { label: '紧急通知', value: 'emergency' },
  { label: '康复指导', value: 'rehab' },
  { label: '饮食提醒', value: 'diet' }
]

const bedOptions = ref<{ label: string; value: string }[]>([])

// 广播模板选项（示例）
const templateOptions = [
  { label: '术前禁食禁饮，保持空腹状态', value: 'tpl1', content: '术前禁食禁饮，保持空腹状态' },
  { label: '术后3天内不能下床活动，多翻身，尽早排气', value: 'tpl2', content: '术后3天内不能下床活动，多翻身，尽早排气' },
  { label: '请做好术前准备，术前禁食禁饮，家属请提前到达手术室门口等候，请不要随意走动...', value: 'tpl3', content: '请做好术前准备，术前禁食禁饮，家属请提前到达手术室门口等候，请不要随意走动...' }
]

// 树形宣教内容（示例）
const treeData = [
  {
    id: 1,
    label: '全部',
    children: [
      {
        id: 2,
        label: '入院宣教',
        children: [
          { id: 11, label: '入院宣教01' },
          { id: 12, label: '入院宣教02' },
          { id: 13, label: '入院宣教03' },
          { id: 14, label: '入院宣教04' }
        ]
      },
      {
        id: 3,
        label: '术前宣教',
        children: [
          { id: 4, label: '直肠外科术前健康宣教' },
          { id: 5, label: '术前宣教02' },
          { id: 6, label: '术前宣教03' }
        ]
      },
      {
        id: 7,
        label: '术后宣教',
        children: [
          { id: 8, label: '术后宣教01' },
          { id: 9, label: '术后宣教02' },
          { id: 10, label: '各项相关检查宣教' }
        ]
      }
    ]
  }
]
const treeProps = { children: 'children', label: 'label' }

const form = reactive({
  type: 'guide',
  beds: [] as string[],
  templates: [] as string[],
  treeChecked: [] as number[],
  taskName: ''
})

// 选中模板内容
const selectedTemplateContent = computed(() => {
  if (form.templates.length === 0) return ''
  const tpl = templateOptions.find(t => t.value === form.templates[0])
  return tpl ? tpl.content : ''
})

// 床位全选/反选
function selectAllBeds() {
  form.beds = bedOptions.value.map(b => b.value)
}
function reverseBeds() {
  form.beds = bedOptions.value.filter(b => !form.beds.includes(b.value)).map(b => b.value)
}

// 树选择
function handleTreeCheck(checkedKeys: any) {
  form.treeChecked = checkedKeys
}

// 保存
function handleSave() {
  if (!form.taskName) {
    ElMessage.warning('请输入任务名称')
    return
  }
  if (form.beds.length === 0) {
    ElMessage.warning('请选择床位')
    return
  }
  // TODO: 提交表单
  ElMessage.success('保存成功（示例）')
}

//获取患者床位信息
const getPatientBedInfo = ()=>{
  axios.get('/api/DoctorManage/GetPatients').then(res=>{
    // 假设res.data.data为数组，每项有bedNo和name
    if(res.data && res.data.data && Array.isArray(res.data.data)){
      bedOptions.value = res.data.data.map((item:any) => ({
        label: `${item.bedCode}床 ${item.name}`,
        value: item.bedCode
      }))
    }
  })
}

onMounted(() => {
  getPatientBedInfo()
})
</script>

<style scoped>
.broadcast-main {
  display: flex;
  background: #f7fafd;
  min-height: 100vh;
  padding: 0 0 0 0;
}
.broadcast-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  margin: 24px 0 24px 24px;
  padding: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  min-width: 340px;
  max-width: 380px;
  flex: none;
}
.left-card { min-width: 340px; }
.mid-card { min-width: 400px; }
.card-header {
  display: flex;
  align-items: center;
  padding: 24px 24px 0 24px;
}
.card-step {
  background: #409eff;
  color: #fff;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin-right: 12px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #222;
}
.card-content {
  padding: 0 24px;
}
.label-row {
  display: flex;
  align-items: center;
  margin: 16px 0 8px 0;
  font-weight: 500;
}
.setting-btn {
  margin-left: 8px;
  padding: 2px 10px;
}
.type-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 16px;
}
.bed-title {
  font-weight: 500;
  margin: 12px 0 8px 0;
}
.bed-actions {
  margin-bottom: 8px;
}
.bed-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.template-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
.template-content {
  margin-bottom: 12px;
}
.tree-title {
  font-weight: 500;
  margin: 12px 0 8px 0;
}
.tree {
  background: #f5f7fa;
  border-radius: 4px;
  padding: 8px;
  min-height: 120px;
}
.right-panel {
  flex: 1;
  background: #f6fafd;
  margin: 24px 0 24px 24px;
  border-radius: 8px;
  padding: 24px 32px 0 32px;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  max-width: 420px;
}
.task-row {
  display: flex;
  align-items: center;
  margin: 32px 0 24px 0;
}
.task-label {
  min-width: 70px;
  font-size: 15px;
  color: #333;
  margin-right: 8px;
}
.task-input {
  flex: 1;
  min-width: 0;
}
.save-btn {
  align-self: flex-start;
  width: 120px;
  margin-bottom: 32px;
}
.record-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow: 0 1px 4px #f0f1f2;
  width: 220px;
}
.view-btn {
  margin-left: 8px;
}
.template-checkbox .template-label {
  white-space: pre-line;
  word-break: break-all;
  display: inline-block;
  line-height: 1.6;
  vertical-align: top;
  max-width: 320px;
}
</style>